<template>
    <div class="main">
        <div class="box">
            <div class="datasource">
                <div class="datasource-box">
                    <div class="datasource-box-input">
                        <hu-select-dict v-model="info.sourceDS" :selectDic="datasorceList"  title="标准库" search style="margin: auto;" />
                    </div>
                </div>
                <div class="transform">【同步】
                </div>
                <div class="datasource-box">
                    <div class="datasource-box-input">
                        <hu-select-dict v-model="info.targetDS" :selectDic="datasorceList" title="目标库" search style="margin: auto;" />
                    </div>
                </div>
                <div class="btn">
                    <hu-button @click="getSqlScript" value="获取同步SQL" size="max" />
                </div>
            </div>
        </div>
        <hu-dialog title="目标库-配置" top="20%" ref="configDialogOpen" width="500px" @hu-dialog="configResultDialog">
            <hu-select-dict v-model="info.lessTableOpt" :selectDic="lessTableOptList"  title="少表时" placeholder="请选择目标库中少表时的操作"/>
            <hu-select-dict v-model="info.moreTableOpt" :selectDic="moreTableOptList"  title="多表时" placeholder="请选择目标库中多表时的操作"/>
            <hu-select-dict v-model="info.lessColOpt" :selectDic="lessColOptList"  title="少列时" placeholder="请选择目标库少列时的操作"/>
            <hu-select-dict v-model="info.moreColOpt" :selectDic="moreColOptList"  title="多列时" placeholder="请选择目标库多列时的操作"/>
        </hu-dialog>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList } from '@/api/datasource'
import { isEmpty } from '@/utils/validate'
import { matchReturnScript, matchReturnFile } from '@/api/extend/match'
export default {
    name: '基于库的表结构同步',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            info: {
                sourceDS: null,
                targetDS: null,
                lessTableOpt: 'ignore',
                moreTableOpt: 'ignore',
                lessColOpt: 'ignore',
                moreColOpt: 'ignore',
            },
            datasorceList: [],
            lessTableOptList: [
                {
                    value: 'ignore',
                    label: '忽略'
                },
                {
                    value: 'add',
                    label: '添加'
                },
            ],
            moreTableOptList: [
                {
                    value: 'ignore',
                    label: '忽略'
                },
                {
                    value: 'delete',
                    label: '删除'
                },
            ],
            lessColOptList: [
                {
                    value: 'ignore',
                    label: '忽略'
                },
                {
                    value: 'add',
                    label: '添加'
                },
            ],
            moreColOptList: [
                {
                    value: 'ignore',
                    label: '忽略'
                },
                {
                    value: 'delete',
                    label: '删除'
                },
            ],
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.selectDataSourceList();
    },
    watch: {

    },
    methods: {
        // 获取数据源字典
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for (let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        getSqlScript() {
            if (!this.validOnClick()) {
                return
            }
            this.$refs.configDialogOpen.openDialog()
        },
        configResultDialog(val) {
            if(!val) {
                return
            } else {
                this.$huTip({ type: 'info', value: '脚本生成中...' })
                this.$refs.configDialogOpen.closeDialog()
                matchReturnFile(this.info).then((res) => {
                    console.log(res.data === null)
                    console.log(res.data === '')
                    console.log(res.data === undefined)
                    console.log(res.data instanceof Object)
                    console.log(typeof res.data)
                    if(res.data === null || res.data === '' || res.data === undefined) {
                    // // if(isEmpty(res.data)) {
                        this.$huTip({ type: 'success', value: '两个库中表结构无差异' })
                        return
                    }
                    const blob = new Blob([res.data])
                        const fileName = `表结构同步.sql`
                        if ('download' in document.createElement('a')) {
                            //支持a标签download的浏览器
                            const link = document.createElement('a');//创建a标签
                            link.download = fileName;//a标签添加属性
                            link.style.display = 'none';
                            link.href = URL.createObjectURL(blob);
                            document.body.appendChild(link);
                            link.click();//执行下载
                            URL.revokeObjectURL(link.href); //释放url
                            document.body.removeChild(link);//释放标签
                        } else {
                            navigator.msSaveBlob(blob, fileName);
                        }
                }).catch((error) => {
                    this.$huTip({ type: 'error', value: error })
                })
            }
        },
        // 按钮点击检验
        validOnClick() {
            if (isEmpty(this.info.sourceDS) && isEmpty(this.info.targetDS)) {
                this.$huTip({ type: 'warning', value: "请选择[标准库]&[目标库]" })
                return false
            }
            if (isEmpty(this.info.sourceDS)) {
                this.$huTip({ type: 'warning', value: "请选择[标准库]" })
                return false
            }
            if (isEmpty(this.info.targetDS)) {
                this.$huTip({ type: 'warning', value: "请选择[目标库]" })
                return false
            }
            if (this.info.sourceDS == this.info.targetDS) {
                this.$huTip({ type: 'warning', value: "请保证[标准库]与[目标库]不同" })
                return false
            }
            return true
        },
    },
}
</script>
<style lang="scss" scoped>
.main {
    position: relative;
    box-sizing: unset;
}

.box {
    width: 80%;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background-color: rgb(181, 181, 181);

    .datasource {
        width: 100%;
        height: 40px;

        &-box {
            width: 35%;
            height: 40px;
            float: left;
        }
        .transform{
            width: 10%;
            height: 40px;
            line-height: 30px;
            float: left;
            text-align: center;
            // background-color: chocolate;

        }
    }
}
</style>